/*
 * @Description: 
 * @version: 1.0
 * @Author: 赵卓轩
 * @Date: 2021-10-04 23:12:57
 * @LastEditors: 赵卓轩
 * @LastEditTime: 2021-10-28 00:07:36
 */
import { Menu, Button } from 'antd';
import React, { useState, useEffect } from 'react';
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';
import AnimalList from '../components/proList/proList';
import { getAnimals, getAnimalsByArea } from '@/request/api/animal';

const { SubMenu } = Menu;

export default () => {
    const [collapsed, setCollapsed] = useState(true);
    const [data, setData] = useState([]);
    const [loading,setLoading] = useState(true);

    useEffect(() => {
        getAnimals().then((res: any) => {
            setData(res.result);
            setLoading(false);
        }
        )
    }, []);

    const sortByArea = (cid: number) => {
        getAnimalsByArea(cid).then((res: any) => {
            setData(res.result);
            setLoading(false);
        })
    }

    const selectMenu = (e: any) => {
        setLoading(true);
        sortByArea(e.key);
    }

    return (
        <>
            <div style={{ width: 256, position: 'fixed', left: '50px', zIndex: 99 }}>
                <Button type="primary" onClick={() => { setCollapsed(!collapsed); }} style={{ marginBottom: 16 }}>
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
                </Button>
                <Menu
                    defaultSelectedKeys={['0']}
                    mode="inline"
                    theme="light"
                    inlineCollapsed={collapsed}
                    onClick={selectMenu}
                >
                    <Menu.Item key="1" icon={<PieChartOutlined />}>
                        信息学部
                    </Menu.Item>
                    <Menu.Item key="2" icon={<DesktopOutlined />}>
                        文理学部
                    </Menu.Item>
                    <Menu.Item key="3" icon={<ContainerOutlined />}>
                        工学部
                    </Menu.Item>
                    <Menu.Item key="0" icon={<MailOutlined />}>
                        全校
                    </Menu.Item>
                    <SubMenu key="subasd" icon={<AppstoreOutlined />} title="Navigation Two">
                        <Menu.Item key="adasd">Option 9</Menu.Item>
                        <Menu.Item key="asda">Option 10</Menu.Item>
                        <SubMenu key="swqrq" title="Submenu">
                            <Menu.Item key="vsz">Option 11</Menu.Item>
                            <Menu.Item key="fads">Option 12</Menu.Item>
                        </SubMenu>
                    </SubMenu>
                </Menu>
            </div>
            <div style={{ width: '80%', margin: '0 auto' }}>
                <AnimalList col={3} data={data} isLoading={loading}/>
            </div>
        </>
    )
}